<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>宣臻官网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
</head>
<body>
	<div class="xz">
		<div class="nav-fix">
			<div class="home-wrap">
				<div class="sub-wrap">
					<div class="sub-container">
						<img src="img/logo.png" alt="logo" class="left">
						<div class="sub-list " >
							<ul>
								<li class="cursor"><a href="index.html">首页</a></li>
								<li class="cursor"><a href="introduction.html">公司简介</a></li>
								<li class="cursor selected b-hover">
									业务介绍
									<span></span>
									<div class="three-bar">
										<ul>
											<li><a href="internet.html">互联网+</a></li>
											<li><a href="network.html">网络整合</a></li>
											<li><a href="event.html">活动传播</a></li>
										</ul>
									</div>
								</li>
								<li class="cursor"><a href="caseShow.html">案例展示</a></li>
								<li class="cursor"><a href="join.html">加入我们</a></li>
							</ul>
						</div>
						<div class="s-nav"></div>	
					</div>
				</div>
				<div class="nav-list">
					<ul>
						<li><a href="index.html">首页</a><span></span></li>
						<li><a href="introduction.html">公司简介</a></li>
						<li class="nav-third">
							<div>
								<div class="nav-t-name">业务介绍</div>
								<div class="nav-w">
									<a href="internet.html">互联网+</a>
									<a href="network.html">网络整合</a>
									<a href="event.html">活动传播</a>
								</div>
								
							</div>
						</li>
						<li><a href="caseShow.html">案例展示</a></li>
						<li><a href="join.html">加入我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="banner-top"></div>
		<div class="internet-bg banner">
			<div class="about-title">
				<span>[</span>
				<div class="about-title-content">
					<div class="bold-font">Internet</div>
					<div class="a-font">+</div>
					<div class="bold-font">Enterprise solution</div>
					<div class="s-font">互联网 + 企业解决方案</div>
				</div>
				<span>]</span>
			</div>
		</div>
		<div class="about-text intro-text">
			我们拥有一支经验丰富的软件设计及开发团队，为客户提供微信公众平台、微网站、轻APP、Native APP策划、设计及开发一站式服务。我们秉持着时尚引领科技的互联网价值观，以创新产品设计为理念，视最佳用户体验为准则，坚持与代码和美学死磕到底，为客户带来全新的互联网体验。
		</div>
		<div class="process ">
			<div class="container process-container">
				<div class="title">
					<div class="title-line"></div>
					<div class="title-name our">业务流程</div>
					<div class="title-line"></div>
				</div>
				<div class="svg-wrap inter-svg-wrap">
					<div class="internet-svg inter-svg-s">
					<svg id="service" viewBox="0,0,1163,600" class="service-svg">
						<image xlink:href="img/process/internet.png" x="130" y="85" height="395px" width="920px"></image>
						<path d="M999 446L890 448L500 448L180 450A92 92 0 0 1 200 275L300 278L1000 278A84 84 0 1 0 940 120L295 118" stroke="#fff" fill="none" stroke-width="19" class="internet-line"></path>
						<image xlink:href="img/process/0.png" x="300" y="0" height="560px" width="570px"></image>
						<g class = "hexagon inter-1">
							<circle cx="300" cy="114" r="30" stroke="#85AFEA" stroke-width="2" fill="#B1CDF1"></circle>
							<text x="250" y="70" fill="#000">软件定制</text>
							<text x="285" y="126" fill="#fff">01</text>
						</g>
						<g class = "hexagon inter-2">
							<circle cx="600" cy="114" r="30"  fill="#B1CDF1"></circle>
							<text x="520" y="70" fill="#000">调研客户需求</text>
							<text x="585" y="126" fill="#fff">02</text>
						</g>
						<g class = "hexagon inter-3">
							<circle cx="870" cy="114" r="30"  fill="#B1CDF1"></circle>
							<text x="795" y="70" fill="#000">需求分析评估</text>
							<text x="854" y="126" fill="#fff">03</text>
						</g>
						<g class = "hexagon inter-4">
							<circle cx="930" cy="274" r="30"  fill="#B1CDF1"></circle>
							<text x="848" y="230" fill="#000">提供解决方案</text>
							<text x="914" y="287" fill="#fff">04</text>
						</g>
						<g class = "hexagon inter-5">
							<circle cx="700" cy="274" r="30"  fill="#B1CDF1"></circle>
							<text x="620" y="230" fill="#000">组建开发团队</text>
							<text x="685" y="287" fill="#fff">05</text>
						</g>
						<g class = "hexagon inter-6">
							<circle cx="420" cy="274" r="30" fill="#B1CDF1"></circle>
							<text x="342" y="230" fill="#000">项目开发实施</text>
							<text x="405" y="287" fill="#fff">06</text>
						</g>
						<g class = "hexagon inter-7">
							<circle cx="180" cy="274" r="30"  fill="#B1CDF1"></circle>
							<text x="105" y="230" fill="#000">项目开发测试</text>
							<text x="165" y="287" fill="#fff">07</text>
						</g>
						<g class = "hexagon inter-8">
							<circle cx="250" cy="444" r="30"  fill="#B1CDF1"></circle>
							<text x="175" y="400" fill="#000">项目部署上线</text>
							<text x="235" y="457" fill="#fff">08</text>
						</g>
						<g class = "hexagon inter-9">
							<circle cx="540" cy="444" r="30"  fill="#B1CDF1"></circle>
							<text x="490" y="400" fill="#000">项目验收</text>
							<text x="525" y="457" fill="#fff">09</text>
						</g>
						<g class = "hexagon inter-10" >
							<circle cx="780" cy="444" r="30" stroke="#85AFEA" stroke-width="2" fill="#B1CDF1"></circle>
							<text x="730" y="400" fill="#000">交付使用</text>
							<text x="765" y="457" fill="#fff">10</text>
						</g>
						<g class = "hexagon inter-11">
							<circle cx="980" cy="444" r="30" stroke="#85AFEA" stroke-width="2" fill="#B1CDF1"></circle>
							<text x="925" y="400" fill="#000">售后服务</text>
							<text x="965" y="457" fill="#fff">11</text>
						</g>
					</svg>
				</div>
				</div>
				
			</div>
		</div>
		<div class="our-advantage">
			<div class="container">
				<div class="title">
					<div class="title-line"></div>
					<div class="title-name our">我们的优势</div>
					<div class="title-line"></div>
				</div>
			</div>
			<div class="container advantage-wrap">
				<div class="ye-wrapper ">
					<div>
		            	<div class="ye-icon">
		            		<img src="img/ye/style.png">
		            	</div>
		            	<div class="ye-title">专属的页面风格</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		根据客户需求及平台定位方向，设计出符合客户形象的页面风格，在有限的屏幕中向客户展示触及视觉灵魂的页面效果，并最终呈现予用户
		            	</div>
		            </div>
		            <div>
		            	<div class="ye-icon">
		            		<img src="img/ye/te.png">
		            	</div>
		            	<div class="ye-title">特定的用户体验</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		分析客户所属公司性质及客户实际需要，考虑用户需求体验。时刻将客户需求及用户体验放在首位
		            	</div>
		            </div>
		            <div>
		            	<div class="ye-icon">
		            		<img src="img/ye/yanjing.png">
		            	</div>
		            	<div class="ye-title">个性的前端效果</div>
		            	<div class="ye-line"></div>
		            	<div class="ye-content">
		            		不同的项目配合不同的前端效果。个性化的设计不仅能让网站增色不少，同时也能增添用户对品牌的好感度
		            	</div>
		            </div>
	            	<div>
	            	<div class="ye-icon">
	            		<img src="img/ye/smail.png">
	            	</div>
	            	<div class="ye-title">人性化后台管理</div>
	            	<div class="ye-line"></div>
	            	<div class="ye-content">
	            		根据企业的需求，为其定制后台功能，数据对接，内容更新及不同的技术语言开发。提升企业便捷化管理与后台管理效率
	            	</div>
	            </div>
			</div>
				<div class="swiper-container internet">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/style.png">
			            	</div>
			            	<div class="ye-title">专属的页面风格</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		根据客户需求及平台定位方向，设计出符合客户形象的页面风格，在有限的屏幕中向客户展示触及视觉灵魂的页面效果，并最终呈现予用户
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/te.png">
			            	</div>
			            	<div class="ye-title">特定的用户体验</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		分析客户所属公司性质及客户实际需要，考虑用户需求体验。时刻将客户需求及用户体验放在首位
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/yanjing.png">
			            	</div>
			            	<div class="ye-title">个性的前端效果</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		不同的项目配合不同的前端效果。个性化的设计不仅能让网站增色不少，同时也能增添用户对品牌的好感度
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/smail.png">
			            	</div>
			            	<div class="ye-title">人性化后台管理</div>
			            	<div class="ye-line"></div>
			            	<div class="ye-content">
			            		根据企业的需求，为其定制后台功能，数据对接，内容更新及不同的技术语言开发。提升企业便捷化管理与后台管理效率
			            	</div>
			            </div>
			        </div>
			        <div class="swiper-pagination pagination-circle"></div>
			    </div>
			</div>
		</div>
		<div class="back cursor" ></div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/z.js"></script>
	<script src="js/velocity.min.js"></script>
	<script>
		function IsPC() {
		    var userAgentInfo = navigator.userAgent;
		    var Agents = ["Android", "iPhone",
		                "SymbianOS", "Windows Phone",
		                "iPad", "iPod"];
		    var flag = true;
		    for (var v = 0; v < Agents.length; v++) {
		        if (userAgentInfo.indexOf(Agents[v]) > 0) {
		            flag = false;
		            break;
		        }
		    }
		    return flag;
		}
		var SvgTop = $(".intro-text").offset().top - $(".intro-text").height() - $(".banner-top").height();
		var flag = false;
		if(!IsPC()) {
			setIntSvg();
		}else {
			$(window).scroll(function(){
			 	if( $(window).scrollTop() > SvgTop) {
			 		if(!flag) {
			 			setIntSvg();
			 			flag = true;
			 		}
			 	}
			});
		}
		function setIntSvg() {
			$(".internet-line").velocity({strokeDashoffset:3000},{duration:5000});
			$(".inter-1").velocity({opacity:1},{duration:1400});
			$(".inter-2").velocity({opacity:1},{duration:500,delay:1100})
			$(".inter-3").velocity({opacity:1},{duration:500,delay:1400})
			$(".inter-4").velocity({opacity:1},{duration:500,delay:1700})
			$(".inter-5").velocity({opacity:1},{duration:500,delay:2000})
			$(".inter-6").velocity({opacity:1},{duration:500,delay:2300})
			$(".inter-7").velocity({opacity:1},{duration:500,delay:2500})
			$(".inter-8").velocity({opacity:1},{duration:500,delay:2900})
			$(".inter-9").velocity({opacity:1},{duration:500,delay:3200})
			$(".inter-10").velocity({opacity:1},{duration:500,delay:3700})
			$(".inter-11").velocity({opacity:1},{duration:500,delay:4200})
		}
		

	</script>
</body>
</html>